<template>
	<view class="ShopCartBox">
		<cu-custom>
			<block slot="content">购物车</block>
		</cu-custom>

		<view class="ShopCart">
			<view class="bg"></view>
			<view class="HasData" v-if="cartList.length !== 0">
				<view class="ShopCartList">
					<view class="ListItem">
						<view class="ItemBtnArea">
							<view class="selectAll">
								<img :src="
				          SelectAll === true
				            ? imgUrl + gameDetailsData.ShopCart.Active
				            : imgUrl + gameDetailsData.ShopCart.NotActive
				        " alt="" class="selectAllImage" @click="IsSelectAll" />
								<view class="selectAllText"> 全选 </view>
							</view>
							<view class="DelBtn" @click="DelCommodity"> 删除 </view>
						</view>

						<view class="ItemContent" v-for="(item, index) in cartList" :key="index">
							<img :src="
				        item.IsActive
				          ? imgUrl + gameDetailsData.ShopCart.Active
				          : imgUrl + gameDetailsData.ShopCart.NotActive
				      " alt="" class="IsSelected" @click.stop="Active(item.goodsCode)" />

							<view class="ContentCenter" @click.stop="toShopDetails(item.goodsCode)">
								<img :src="item.goodsMainImage" alt="" class="ProductPicture" />
								<view class="ProductInfo">
									<view class="ProductTitle">
										{{ item.goodsName }}
									</view>
									<view class="specification">
										{{ item.goodsSpecification }}
									</view>
									<view class="PriceArea">
										<view class="RMB"> ￥ </view>
										<view class="price">
											{{ item.goodsPrice }}
										</view>
									</view>
								</view>
							</view>

							<view class="ContentRight">
								<view class="Minus" @click="changeNum(false, item, index)">
									-
								</view>
								<input type="text" class="NumInput" v-model="item.goodsNum"
									@blur="changeStockNum(item, index)" />
								<view class="Add" @click="changeNum(true, item, index)"> + </view>
							</view>
						</view>
					</view>
				</view>

				<view class="settlement">
					<view class="settlementLeft">
						<view class="totalPrice">
							<view class="totalPriceText"> 合计:￥ </view>
							<view class="TotalPrice">
								{{ TotalPrice }}
							</view>
						</view>
					</view>

					<view class="settlementRight" @click="CreateOrder"> 去结算 </view>
				</view>


			</view>
			<view class="NoData" v-else>
				<img :src="imgUrl + gameDetailsData.ShopCart.NoData" alt="" class="NoDataImage">
				<view class="text" v-if="!LoginOrNot">您还没有加入购物车，立即登录开始选购吧 ~</view>
				<view class="text" v-else>您的购物车空空如也 ~</view>
			</view>
		</view>
	</view>
</template>

<script>
	import gameDetails from "@/static/lib/public.js";
	export default {
		data() {
			return {
				cartList: [],

				imgUrl: this.$http.imgUrl,

				gameDetailsData: gameDetails,

				SelectAll: false,

				TotalPrice: 0,

				LoginOrNot: ''
			};
		},
		created() {
			this.LoginOrNot = this.IsLogin();
			if (this.LoginOrNot) {
				this.getData();
			}
			console.log(this.LoginOrNot);
		},
		computed: {
			// TotalPrice() {
			//   return this.cartList
			//     .filter((item) => item.IsActive)
			//     .reduce((res, item) => {
			//       return (res += item.goodsNum * item.goodsPrice);
			//     }, 0);
			// },
		},
		methods: {
			getData() {
				this.getShopCatList();
			},
			TotalPriceMd() {
				this.TotalPrice = this.cartList
					.filter((item) => item.IsActive)
					.reduce((res, item) => {
						return (res += item.goodsNum * item.goodsPrice);
					}, 0);
			},
			async getShopCatList() {
				const url = this.api.shopCart.getShopCartList;
				const res = await this.$http.get(url, {});
				console.log(res.data.data, "购物车列表");
				this.cartList = res.data.data;
				this.cartList.map((item) => {
					item.IsActive = false;
				});
			},
			Active(id) {
				this.cartList.map((item, index) => {
					if (item.goodsCode == id) {
						this.$set(this.cartList, index, {
							...item,
							IsActive: !item.IsActive,
						});
					}
				});
				this.SelectAll = this.cartList.every((item) => {
					return item.IsActive == true;
				});
				this.TotalPriceMd();
			},

			IsSelectAll() {
				if (this.SelectAll) {
					this.cartList.map((item) => {
						item.IsActive = false;
					});
					this.SelectAll = false;
				} else {
					this.cartList.map((item) => {
						item.IsActive = true;
					});
					this.SelectAll = true;
				}
				this.TotalPriceMd();
			},
			CreateOrder() {
				this.TotalPrice = 0;
				const cartList = this.cartList.filter(item => {
					return item.IsActive == true
				})
				if (cartList.length > 0) {
					uni.navigateTo({
						url: "/pagesA/Order/ConfimOrder?cartList=" + JSON.stringify(cartList),
					});
				} else {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					});
				}
			},
			// 加减当前商品
			async changeNum(state, item, index) {
				let url = "";
				console.log(item);
				if (state) {
					url = this.api.shopCart.CommodityNumberAdd;
				} else {
					url = this.api.shopCart.CommodityNumberReduce;
				}
				const res = await this.$http.post(url, {
					goodCode: item.goodsCode,
					goodsNum: item.goodsNum,
				});
				if (res.data.code == 500) {
					uni.showToast({
						title: "库存不足",
						icon: "error",
					});
					return;
				}
				console.log(res);

				this.getShopCatList();
				// this.cartList[index].goodsNum = item.goodsNum++;
				if (res.data.code == 200) {
					uni.showToast({
						title: "修改成功",
						icon: "success",
					});
				}
				// console.log(res.data, '修改结果');
			},
			// 更改当前商品数量
			async changeStockNum(item, index) {
				if (item.goodsNum == 0) {
					uni.showToast({
						title: "商品数量不可为零",
					});
					this.cartList[index].goodsNum = 1;
					return;
				}

				const url = this.api.shopCart.EditShopNumer;
				const res = await this.$http.post(url, {
					goodsCode: item.goodsCode,
					goodsNum: Number(item.goodsNum),
				});
				if (res.data.code === 200) {
					uni.showToast({
						title: "修改成功",
						icon: "success",
					});
				}
				// console.log(res.data, '修改结果');
			},

			async DelCommodity() {
				const goodsCode = this.cartList
					.filter((item) => item.IsActive)
					.map((item) => {
						return item.goodsCode;
					});

				const url = this.api.shopCart.BatchDeletion;
				const res = await this.$http.post(url, {
					goodsCode,
				});
				if (res.data.code == 200) {
					uni.showToast({
						title: '删除成功'
					})
					this.TotalPrice = 0
				}
				// console.log(res.data, '删除结果');
				this.getShopCatList();
			},
			toShopDetails(id) {
				uni.navigateTo({
					url: "/pagesA/HomePage/ShopDetails?id=" + id,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.ShopCartBox {
		width: 100%;
		position: relative;
		padding-bottom: 200rpx;

		.ShopCart {
			width: 100%;
			height: 100%;

			.bg {
				width: 100%;
				height: 348rpx;
				background-image: url("https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/bg.png");
				background-size: 100% 100%;
				position: absolute;
				top: 0%;
				z-index: -1;
			}

			.HasData {
				.ShopCartList {
					padding: 0 24rpx;
					margin-bottom: 100rpx;

					.ListItem {
						width: 702rpx;
						background: #ffffff;
						box-shadow: 0rpx 10rpx 20rpx 2rpx rgba(0, 0, 0, 0.03);
						border-radius: 32rpx 32rpx 32rpx 32rpx;
						opacity: 1;
						padding: 28rpx 24rpx 30rpx 20rpx;
						margin-bottom: 30rpx;

						.ItemBtnArea {
							display: flex;
							justify-content: space-between;

							.selectAll {
								display: flex;
								align-items: center;

								.selectAllImage {
									width: 48rpx;
									height: 48rpx;
								}

								.selectAllText {
									font-weight: 700;
									font-size: 32rpx;
									margin-left: 20rpx;
								}
							}

							.DelBtn {
								width: 120rpx;
								height: 52rpx;
								border-radius: 26rpx 26rpx 26rpx 26rpx;
								opacity: 1;
								border: 1rpx solid rgba(0, 0, 0, 0.1);
								line-height: 52rpx;
								text-align: center;
							}
						}

						.ItemContent {
							display: flex;
							align-items: center;
							margin-top: 28rpx;
							margin-bottom: 60rpx;

							&:last-child {
								margin-bottom: 0rpx;
							}

							.IsSelected {
								width: 48rpx;
								height: 48rpx;
								margin-right: 20rpx;
							}

							.ContentCenter {
								display: flex;
								flex: 1;

								.ProductPicture {
									width: 180rpx;
									height: 180rpx;
									background-color: #000;
									border-radius: 15rpx;
								}

								.ProductInfo {
									width: 200rpx;
									margin-left: 16rpx;

									.ProductTitle {
										width: 100%;
										height: 40rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}

									.specification {
										width: 134rpx;
										height: 56rpx;
										background: rgba(0, 12, 39, 0.05);
										border-radius: 8rpx 8rpx 8rpx 8rpx;
										opacity: 1;
										margin-top: 24rpx;
										text-align: center;
										line-height: 56rpx;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										color: #000;
										opacity: 0.4;
									}

									.PriceArea {
										display: flex;
										color: #e34949;
										margin-top: 16rpx;

										.RMB {
											font-size: 22rpx;
											padding-top: 10rpx;
										}

										.price {
											font-size: 36rpx;
										}
									}
								}
							}

							.ContentRight {
								display: flex;
								width: 200rpx;
								align-items: center;
								text-align: center;
								padding-top: 100rpx;

								.Minus {
									width: 50rpx;
									margin-right: 20rpx;
								}

								.NumInput {
									margin-right: 20rpx;
								}

								.Add {
									width: 50rpx;
									margin-left: 20rpx;
								}
							}
						}
					}
				}

				.settlement {
					position: fixed;
					bottom: 130rpx;
					width: 750rpx;
					height: 120rpx;
					background: #FFFFFF;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					z-index: 10;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0rpx 20rpx;

					.settlementLeft {
						.totalPrice {
							display: flex;
							align-items: center;

							.totalPriceText {
								color: #1b1b2a;
								font-size: 24rpx;
							}

							.TotalPrice {
								font-size: 36rpx;
								color: #e34949;
							}
						}

						.postage {
							color: #000000;
							opacity: 0.4;
						}
					}

					.settlementRight {
						width: 200rpx;
						height: 84rpx;
						background: #386af6;
						border-radius: 46rpx 46rpx 46rpx 46rpx;
						opacity: 1;
						color: #FFFFFF;
						text-align: center;
						line-height: 84rpx;
					}
				}

			}

			.NoData {
				.NoDataImage {
					width: 280rpx;
					height: 240rpx;
					margin-left: 234rpx;
					margin-top: 304rpx;
				}


				.text {
					margin-top: 44rpx;
					width: 100%;
					text-align: center;
					color: #9FA19F;
					font-size: 28rpx;
				}
			}
		}
	}
</style>